<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>

      <el-form-item label="所属单位" prop="departmentId">
        <el-cascader v-model="pram.departmentId" :disabled="pram.departmentId ===0" :options="parentOptions"
                     :props="categoryProps" style="width:100%"
        />
        <!-- allTreeList or parentOptions-->
      </el-form-item>

      <el-form-item label="责任人" prop="personName">
        <el-input v-model="pram.personName" maxlength="100" placeholder="责任人"/>
      </el-form-item>
      <template v-if="pageType === 5">
        <el-form-item label="设备类型" prop="equipmentType">
          <el-input v-model="pram.equipmentType" maxlength="100" placeholder="设备类型"/>
        </el-form-item>

      </template>
      <template v-if="pageType === 2">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="pram.projectName" maxlength="100" placeholder="项目名称"/>
        </el-form-item>
        <el-form-item label="MAC地址" prop="macAddress">
          <el-input v-model="pram.macAddress" maxlength="100" placeholder="MAC地址"/>
        </el-form-item>
      </template>
      <template v-if="pageType === 4||pageType === 5">
        <el-form-item label="设备编号" prop="equipmentNumber">
          <el-input v-model="pram.equipmentNumber" maxlength="100" placeholder="设备编号"/>
        </el-form-item>
      </template>
      <template v-if="pageType === 4">
        <el-form-item label="硬盘序列号" prop="diskNumber">
          <el-input v-model="pram.diskNumber" maxlength="100" placeholder="硬盘序列号"/>
        </el-form-item>
        <el-form-item label="内存卡编号" prop="diskNumber">
          <el-input v-model="pram.memoryCard" maxlength="100" placeholder="内存卡编号"/>
        </el-form-item>
      </template>
      <template v-if="pageType === 3">
        <el-form-item label="业务内容" prop="businessContent">
          <el-input v-model="pram.businessContent" maxlength="100" placeholder="业务内容"/>
        </el-form-item>
      </template>
      <template v-if="pageType === 1 || pageType === 2|| pageType === 3|| pageType === 6">
        <el-form-item label="计算机编号" prop="equipmentNumber">
          <el-input v-model="pram.equipmentNumber" maxlength="100" placeholder="计算机编号"/>
        </el-form-item>
      </template>
      <template v-if="pageType !== 4 && pageType !== 5">
        <el-form-item label="内置硬盘序列号" prop="equipmentType">
          <el-input v-model="pram.equipmentType" maxlength="100" placeholder="内置硬盘序列号"/>
        </el-form-item>
      </template>
        <el-form-item label="品牌型号" prop="brandModel">
          <el-input v-model="pram.brandModel" maxlength="100" placeholder="品牌型号" />
        </el-form-item>
        <el-form-item label="启用时间" prop="activationTime">
          <el-date-picker v-model="pram.activationTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="date" placement="bottom-end" style="width: 100%;" @change="onchangeTime" placeholder="启用时间"/>
        </el-form-item>
      <template v-if="pageType === 6">
        <el-form-item label="IP地址" prop="ipAddress">
          <el-input v-model="pram.ipAddress" maxlength="100" placeholder="IP地址"/>
        </el-form-item>
        <el-form-item label="Mac地址" prop="macAddress">
          <el-input v-model="pram.macAddress" maxlength="100" placeholder="Mac地址"/>
        </el-form-item>
      </template>
      <template v-if="pageType === 4||pageType === 5">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="pram.remark" maxlength="100" placeholder="备注" :rows="5" />
        </el-form-item>
      </template>
      <el-form-item label="序号">
        <el-input-number v-model="pram.number" :min="0"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="permiName">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import * as computerApi from '@/api/computer.js'
import { Debounce } from '@/utils/validate'

export default {
  // name: "edit"
  components: {},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    allPersonList: {
      type: Array
    },
    allTreeList: {
      type: Array
    },
    allPageType: {
      type: Number,
      required: true
    }
  },
  data() {
    /*const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写手机号'));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'));
      } else {
        callback();
      }
    };*/
    return {
      constants: this.$constants,
      pram: {
        type: null,
        name: null,
        departmentId: null,
        projectName: null,
        ipAddress: null,
        macAddress: null,
        personName: null,
        diskNumber: null,
        brandModel: null,
        activationTime: null,
        businessContent: null,
        equipmentNumber: null,
        equipmentType: null,
        memoryCard: null,
        remark: null,
        number: 0,
        id: 0
      },
      rules: {
        name: [{ required: true, message: '请填计算机编号', trigger: ['blur', 'change'] }],
        departmentId: [{ required: true, message: '请选择所属单位', trigger: ['blur', 'change'] }],
        //ipAddress: [{ required: true, message: '请填ip地址', trigger: ['blur', 'change'] }],
        //macAddress: [ { required: true, message: '请填Mac地址', trigger: ['blur', 'change']} ],
        personName: [{ required: true, message: '请填写责任人', trigger: ['blur', 'change'] }],
        diskNumber: [{ required: true, message: '请填硬盘序列号', trigger: ['blur', 'change'] }],
        brandModel: [{ required: true, message: '请填品牌型号', trigger: ['blur', 'change'] }],
        activationTime: [{ required: true, message: '请选择启用时间', trigger: ['blur', 'change'] }]
        //activationTime: [{ required: true, message: '请选择启用时间', trigger: ['blur', 'change'] }],
      },
      personList: [],
      parentOptions: [],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: false,
        emitPath: false
      },

      pageType: null,
      permiName: []
    }
  },
  mounted() {
    this.pageType = this.allPageType
    this.initDataByPageType()
    this.initEditData()
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },
    onchangeTime(e) {
      this.pram.activationTime = e
    },

    initDataByPageType() {
      switch (this.pageType) {
        case 1:
          this.permiName = ['admin:computer:update', 'admin:computer:save']
          break
        case 2:
          this.permiName = ['admin:computer:equip:update', 'admin:computer:equip:save']
          break
        case 3:
          this.permiName = ['admin:computer:single:update', 'admin:computer:single:save']
          break
        case 4:
          this.permiName = ['admin:computer:camera:update', 'admin:computer:camera:save']
          break
        case 5:
          this.permiName = ['admin:computer:print:update', 'admin:computer:print:save']
          break
        case 6:
          this.permiName = ['admin:computer:laptop:update', 'admin:computer:laptop:save']
          break
      }
    },
    initEditData() {
      this.personList = this.allPersonList
      this.parentOptions = [...this.allTreeList]
      this.addTreeListLabelForCasCard(this.parentOptions, 'child')

      if (this.isCreate !== 1) return //编辑
      const {
        name,
        departmentId,
        ipAddress,
        macAddress,
        personId,
        diskNumber,
        brandModel,
        activationTime,
        personName,
        projectName,
        equipmentNumber,
        memoryCard,
        businessContent,
        equipmentType,
        remark,
        id
      } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.name = name
      this.pram.projectName = projectName
      this.pram.remark = remark
      this.pram.equipmentType = equipmentType
      this.pram.equipmentNumber = equipmentNumber
      this.pram.businessContent = businessContent
      this.pram.memoryCard = memoryCard
      this.pram.departmentId = departmentId
      this.pram.ipAddress = ipAddress
      this.pram.macAddress = macAddress
      this.pram.personId = personId
      this.pram.diskNumber = diskNumber
      this.pram.brandModel = brandModel
      this.pram.activationTime = activationTime
      this.pram.personName = personName
      this.pram.id = id
    },
    addTreeListLabelForCasCard(arr, child) {
      arr.forEach((o, i) => {
        if (o.child && o.child.length) {
          // o.disabled = true
          o.child.forEach((j) => {
            //j.disabled = true
          })
        }
      })
    },
    handlerSubmit: Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        if (this.isCreate === 0) {
          this.handlerSave()
        } else {
          this.handlerEdit()
        }
      })
    }),
    handlerSave() {
      this.pram.type = this.pageType
      computerApi.comAdd(this.pram).then(data => {
        this.$message.success('创建成功')
        this.$emit('hideEditDialog')
      })
    },
    handlerEdit() {
      this.pram.type = this.pageType
      computerApi.comAdd(this.pram).then(data => {
        this.$message.success('更新成功')
        this.$emit('hideEditDialog')
      })
    }
  }
}
</script>

<style scoped>

</style>
